<template>
  <div class="container-login">
    <header class="header">
      <img style="width: 36px" src="@/assets/favicon.png" />
      <div class="header-text">Online Judge</div>
    </header>
    <div class="content">
      <div class="form-wrapper">
        <div class="form-title">欢迎使用</div>
        <a-tabs v-model:active-key="tabActiveKey" animation :justify="true">
          <a-tab-pane
            key="1"
            class="login-form-tab1"
            title="登录"
            destroy-on-hide
          >
            <LoginForm />
          </a-tab-pane>
          <a-tab-pane
            key="2"
            class="register-form-tab"
            title="注册"
            destroy-on-hide
          >
            <RegisterForm />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>


import { ref } from 'vue';
import RegisterForm from '@/page/user/components/register-form.vue'
import LoginForm from '@/page/user/components/login-form.vue'


const tabActiveKey = ref('1');
</script>

<style scoped>
.form-wrapper {
  width: 450px;
  height: 100%;
  padding: 24px 24px 12px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-large);
}

.form-title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text-1);
}

.container-login {
  display: flex;
  height: 100vh;
  background-image: url('../../assets/images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.container-login .content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform: translate(-50%, -50%);
}

.container-login .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
}

.container-login .header {
  position: fixed;
  top: 0;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0; /* 这里的 @spacing-7 和 @spacing-0 变量需要替换为实际的数值 */
}

.container-login .header .header-text {
  margin-right: 4px;
  margin-left: 4px;
  font-size: 26px;
  font-weight: 500;
  color: rgb(var(--color-text-1));
}

:deep(.arco-tabs-content) {
  height: 155px;
}

@media (max-height: 768px) { /* 这里的 @screen-md 变量需要替换为实际的数值 */
  .footer {
    display: none;
  }
}

</style>
